<template>
  <cell-wrapper
    v-for="wrapperType in ['SHADOW', 'TABLE_CELL']"
    :key="wrapperType"
    :wrapper-type="wrapperType"
    :style="{ backgroundColor: contentStyle.backgroundColor }"
  >
    <text-display-cell
      v-if="!editState"
      :text="value"
      :columnConfig="columnsConfig"
      v-bind="contentStyle"
    />
    <a-select
      v-else
      :value="value"
      mode="multiple"
      labelInValue
      :options="dataSource || []"
      class="full-width"
      @change="handleValueChange"
    />
  </cell-wrapper>
</template>

<script>
  import { computed, defineComponent } from 'vue';
  import TextDisplayCell from '@/components/page/tableCell/textDisplayCell.vue';
  import CellWrapper from '@/components/page/tableCell/cellWrapper.vue';
  import { judgeCellEditable } from '@/utils/index';

  export default defineComponent({
    name: 'MultipleOptionsTableCell',
    components: {
      TextDisplayCell,
      CellWrapper,
    },
    inheritAttrs: false,
    props: {
      // 当前单元格的值
      value: {
        type: [Number, String, null, Array],
        default: () => {
          return null;
        },
      },
      // 单元格的默认样式
      defaultStyle: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 单元格的条件样式配置
      conditionStyle: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 当前行的数据
      rowData: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 单元格条件配置的中使用的动态数据：key为数据的id，value为数据的值
      conditionValueMap: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前列的配置
      columnsConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      // 当前单元格依赖的外部数据源
      dataSource: {
        type: Array,
        default: () => [],
      },
      // 当前单元格是否处于编辑状态
      isEdit: {
        type: Boolean,
        default: () => {
          return false;
        },
      },
    },
    emits: ['change'],
    setup(props, { emit }) {
      const editState = computed(() => {
        return (
          props.isEdit &&
          judgeCellEditable(props.columnsConfig, props.rowData, props.conditionValueMap)
        );
      });

      // 内容显示的样式
      const contentStyle = computed(() => {
        let { iconType, icon, color, backgroundColor } =
          props.columnsConfig.contentConfig.defaultStyle || {};

        // 此处可添加条件格式的处理逻辑

        return { iconType, icon, color, backgroundColor };
      });

      function handleValueChange(value) {
        emit('change', value);
      }

      return {
        editState,
        contentStyle,
        handleValueChange,
      };
    },
  });
</script>

<style scoped>
  .full-width {
    width: 100%;
  }
</style>
